<template>
  <div>

    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-input size="small" v-model="queryForm.money" clearable placeholder="金额"></el-input>
      </el-form-item>
      <el-button size="small" type="primary" icon="el-icon-search" @click="list">查询</el-button>
      <el-button>新增</el-button>
      <el-button type="danger">批量删除</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%" height="510" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">

      <el-table-column label="充值金额" prop="money">
      </el-table-column>
      <el-table-column label="配置金额" prop="returnMoney">
      </el-table-column>
      <el-table-column label="备注" prop="note">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="doLoad(scope.$index, scope.row)" title="查看" icon="el-icon-tickets">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[5,10, 25, 50, 100]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryForm: {
          money: null,
          page: 1,
          rows: 10,
          total: 0
        },
        tableData: [],
      }
    },
    methods: {},
    created() {
      this.list()
    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .block {
    margin-top: 20px;
    text-align: right;
  }

  .disabled {
    font-size: 17px;
  }
</style>
